<template>
  <el-container class="container" v-loading="loading" element-loading-text="请稍后">
    <transition name="slide-fade" mode="out-in">
      <el-form class="login-form" :model="store" ref="store" :rules="rules"   key="box2" size="small">
        <div class="logo-item">
          <img src="../../assets/logo.png" class="logo-image">
          <span class="form-tips">店铺申请</span>
        </div>
        <el-form-item label="店铺名" prop="name">
          <el-input v-model="store.name" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address">
          <el-input v-model="store.address" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item label="营业执照号" prop="license">
          <el-input v-model="store.license" prefix-icon="el-icon-arrow-right"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="register-btn" icon="el-icon-check" @click="apply">申 请</el-button>
        </el-form-item>
      </el-form>
    </transition>
  </el-container>
</template>

<script>
export default {
  name: 'MerchantLogin',
  data: function () {
    return {
      current: 'login',
      store: {
        name: '',
        address: '',
        license: '',
        user: {
          id: this.$store.state.merchantUser.id
        }
      },
      rules: {
        name: [
          {required: true, message: '请输入店铺名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入店铺地址', trigger: 'blur'}
        ],
        license: [
          {required: true, message: '请输入营业执照号', trigger: 'blur'}
        ]
      },
      imageUrl: '',
      loading: false
    }
  },
  methods: {
    apply () {
      this.$merchantAPI.merchant_apply(this.store).then((params) => {
        this.$alert('申请成功')
        this.$store.state.store = {
          id: params.data['id'],
          currentAuditStatus: params.data['currentAuditStatus']
        }
      }).catch((params) => {
      })
    }
  }
}
</script>

<style scoped>
  .slide-fade-enter-active {
    transition: all .15s ease;
  }

  .slide-fade-leave-active {
    transition: all .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(100px);
    opacity: 0;
  }

  .container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../../assets/images/customer/login_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .login-form {
    width: 370px;
    padding: 50px 80px;
    border-radius: 10px;
    background-color: white;
  }

  .el-form-item {
    margin-bottom: 14px !important;
  }

  .login-submit-btn, .register-btn {
    width: 100%;
  }

  .register-btn {
    margin-top: 14px;
  }

  .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }

  .logo-image {
    width: 240px;
  }

  .form-tips {
    font-size: 17px;
    margin-left: 15px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.36);
  }

  .avatar-uploader {
    width: 250px;
    height: 120px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.35);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  a {
    text-decoration: none;
    color: #a2a2a2;
  }
</style>
